import './Scss.scss';
import { useEventEmitter, useMount } from 'ahooks'
import { useNavigate } from 'react-router-dom'
import { cloneElement, useState, lazy } from 'react'
import { Avatar, Dropdown, Button, theme, Select, Tooltip, App } from "antd"
import { useSessionStorageState } from 'ahooks'
import {
    UserOutlined,
    DesktopOutlined,
    ShakeOutlined,
    QuestionOutlined,
    CustomerServiceOutlined,
    FieldTimeOutlined,
    FundProjectionScreenOutlined,
    LockOutlined,
    LogoutOutlined
} from '@ant-design/icons'
import { GetIndexedDB } from '../../Utils/IndexedDB'
import { UserAvatar } from '../../Config/config'

import { ModelBox } from '../../Model'



const { useToken } = theme
const testProjectList = [
    { value: 1, label: '鹤伊高速智慧工地指挥系统' },
    { value: 2, label: '龙丰试验检测管理云平台' },
    { value: 3, label: '八达PPP项目管理云平台' },
    { value: 4, label: '黑龙江交通建筑材料查询平台' },
    { value: 5, label: '龙督试验检测管理云平台' },
    { value: 6, label: '黑龙江省公路建设中心智慧工地项目管理云平台' },
    { value: 7, label: '黑龙江省交通基础设施建设项目信息化平台' },
    { value: 8, label: '北漠高速智慧工地指挥系统' },
    { value: 9, label: '哈尔滨都市圈西南环线智慧管理云平台' },
]

const A01 = ({ PageEvent }) => {
    const { message } = App.useApp();
    const { token } = useToken();
    const onNavigate = useNavigate()
    const [UserInfo, setUserInfo] = useState()
    const [HeadConfig, setHeadConfig] = useState()
    const [Active, setActive] = useState(1)
    const [OptionsCall, setOptionsCall] = useState()
    const [Template, setTemplate] = useState()
    const [LockPwd, setLockPwd] = useSessionStorageState('LockPwd')
    const [LockScreen, setLockScreen] = useSessionStorageState('LockScreen', { defaultValue: false })
    const [UnLockPwd, setUnLockPwd] = useState('')

    const [RouterUuid, setRouterUuid] = useState()

    const pageList = {
        UserConfig: { key: 'Head01', label: '用户信息', type: 'Custom', page: 'UserConfig' },
        NotificationInfo: { key: 'Noti01', label: '站内通知', type: 'Custom', page: 'NotificationInfo' },
        HelpInfo: { key: 'Help01', label: '帮助信息', type: 'Custom', page: 'HelpInfo' },
        CustomerService: { key: 'Cust01', label: '智能客服', type: 'Custom', page: 'CustomerService' },
        WorkPlan: { key: 'Plan01', label: '工作计划', type: 'Custom', page: 'WorkPlan' },
        Workbench: { key: 'Work01', label: '工作台', type: 'Custom', page: 'Workbench' },
    }
    const onToNav = (url) => PageEvent.emit({ type: 'openPage', data: pageList[url] })

    PageEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'userInfo') getUserInfo()
    })

    const onLockScreen = () => setOptionsCall({ type: 'UserSetLock', data: '锁屏设置' })
    const onSwitchPage = (url) => {
        // 路由跳转
        onNavigate(url)
    }


    // WorkPlan
    const NavMapping = [
        { value: 1, label: '切换首页', icon: <DesktopOutlined onClick={() => onSwitchPage(`/Start/${RouterUuid}`)} /> },
        { value: 2, label: '站内通知', icon: <ShakeOutlined onClick={() => onToNav('NotificationInfo')} /> },
        { value: 3, label: '帮助信息', icon: <QuestionOutlined onClick={() => onToNav('HelpInfo')} /> },
        { value: 4, label: '智能客服', icon: <CustomerServiceOutlined onClick={() => onToNav('CustomerService')} /> },
        { value: 5, label: '工作计划', icon: <FieldTimeOutlined onClick={() => onToNav('WorkPlan')} /> },
        { value: 6, label: '工作台', icon: <FundProjectionScreenOutlined onClick={() => onToNav('Workbench')} /> },
        { value: 7, label: '锁屏', icon: <LockOutlined onClick={onLockScreen} /> },
        { value: 8, label: '退出登录', icon: <LogoutOutlined onClick={() => onSwitchPage('/')} /> },
    ]

    const menuArr = [
        { key: 1, label: (<div className='Downnav' onClick={() => onToNav('UserConfig')}>用户信息</div>) },
        { key: 2, label: (<div className='Downnav' onClick={() => onSwitchPage(`/Start/${RouterUuid}`)} >切换大屏</div>) },
    ]

    useMount(async () => {
        const [{ key }] = await GetIndexedDB('router')
        setRouterUuid(key)
        getUserInfo()
        if (LockScreen) Lock(LockScreen)
    })


    const getUserInfo = async () => {
        const { userInfo, headConfig } = await GetIndexedDB('theme')
        setHeadConfig(headConfig)
        setUserInfo({
            ...userInfo,
            admin: 'tonzoc',
            mobile: '13888888888',
            identity: '超级管理员',
        })
    }

    const ModalEvent = useEventEmitter()
    ModalEvent.useSubscription(val => {
        if (val.type === 'Lock') Lock(val.data)
    })

    const Lock = (url) => {
        const Lock = lazy(() => import(`../../View/LockScreen/${url}.jsx`))
        setTemplate(Lock)
        setLockScreen(url)
    }

    const Unlock = () => {
        if (!LockPwd || LockPwd === UnLockPwd) {
            setTemplate()
            setLockPwd()
            setUnLockPwd('')
            setLockScreen(false)
        }
        else message.error('输入的解锁码有误!')
    }

    if (UserInfo && HeadConfig) {
        const { optionsList, AvatarShape, AvatarTrigger } = HeadConfig
        return (
            <div className='HeadA01'>
                <div className='options'>
                    <Select value={Active} options={testProjectList} onChange={setActive} />
                    <div>
                        {(() => {
                            return optionsList.map(key => {
                                const Bar = NavMapping.find(v => v.value === key)
                                return (
                                    <Tooltip key={key} title={Bar.label} placement="bottom">
                                        {Bar.icon}
                                    </Tooltip>
                                )
                            })
                        })()}
                    </div>
                </div>
                <div className='user'>
                    <Dropdown
                        menu={{ items: menuArr }}
                        placement="bottomRight"
                        trigger={[AvatarTrigger]}
                        arrow
                        dropdownRender={(menu) => (
                            <div className='UserDown' >
                                {UserAvatar &&
                                    <>
                                        <div className='DropdownUserInfo'>
                                            <Avatar shape={AvatarShape} size={48} src={<img src={UserAvatar[UserInfo.Avatar]} alt="avatar" />} />
                                            <div className='UserInfo'>
                                                <div>{UserInfo.identity}</div>
                                                <div>{UserInfo.NickName || UserInfo.admin}</div>
                                            </div>
                                        </div>
                                        {cloneElement(menu, { style: { boxShadow: 'none' } })}
                                        <div className='DropdownSignOut'>
                                            <Button type='primary' danger onClick={() => onSwitchPage('/')}>退出登录 <LogoutOutlined /></Button>
                                        </div>
                                    </>
                                }
                            </div>
                        )}
                    >
                        <div>
                            {UserInfo ?
                                <Avatar size={48} shape={AvatarShape} src={<img src={UserAvatar[UserInfo.Avatar]} alt="avatar" />} /> :
                                <Avatar size={48} shape={AvatarShape} icon={<UserOutlined />} />
                            }
                        </div>
                    </Dropdown>
                </div>
                {LockScreen && Template &&
                    <div className='LockScreen'>
                        <Template />
                        <div className='Unlock'>
                            <div className='Card'>
                                <div className="inp">
                                    <input type="text" className="input" value={UnLockPwd} onChange={e => setUnLockPwd(e.target.value)} />
                                </div>
                                <button onClick={Unlock}>解锁</button>
                                <svg className="svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="#4073ff" d="M56.8,-23.9C61.7,-3.2,45.7,18.8,26.5,31.7C7.2,44.6,-15.2,48.2,-35.5,36.5C-55.8,24.7,-73.9,-2.6,-67.6,-25.2C-61.3,-47.7,-30.6,-65.6,-2.4,-64.8C25.9,-64.1,51.8,-44.7,56.8,-23.9Z" transform="translate(100 100)" className="path"></path>
                                </svg>
                            </div>

                        </div>
                    </div>
                }
                <ModelBox OptionsCall={OptionsCall} ModalEvent={ModalEvent} />
            </div>
        )
    }
}

export default A01